<template>
    <div class="comment-item">
        <Avatar :url="comment.avatar" width="50px" height="50px" />
        <div class="comment-maim">
            <div class="comment_box">
                <div class="comment_hd">
                    <div class="info">
                        <p>
                            <i class="el-icon-s-custom"></i>
                            {{ comment.user_name }}
                            <span v-if="comment.role">
                                ({{ comment.role_name }})
                            </span>
                        </p>
                        <p class="time">
                            <i class="el-icon-time"></i>
                            {{ comment.created_time | formatTime }}
                        </p>
                    </div>
                    <div class="floor">{{ floor + 1 }}楼</div>
                </div>
                <div class="comment_bd">
                    <p v-html="comment.content"></p>
                </div>
                <div class="comment_ft">
                    <i
                        class="el-icon-chat-dot-square"
                        @click="showReply(comment, null)"
                    ></i>
                </div>
            </div>
            <div
                class="reply_box hvr-shadow"
                v-for="item in comment.childrens"
                :key="item.id"
            >
                <div class="comment_hd">
                    <div class="info">
                        <p>
                            <span>{{ item.user_name }}</span>
                            <span v-if="item.role_name">
                                ({{ item.role_name }})
                            </span>
                            <span class="tips">回复</span>
                            <span>{{ item.reply_name }}</span>
                            <span v-if="item.reply_role">
                                ({{ item.reply_role_name }})
                            </span>
                        </p>
                        <p class="time">
                            <i class="el-icon-time"></i>
                            {{ comment.created_time | formatTime }}
                        </p>
                    </div>
                </div>
                <div class="comment_bd">
                    <p v-html="item.content"></p>
                </div>
                <div class="comment_ft">
                    <i
                        class="el-icon-chat-dot-square"
                        @click="showReply(comment, item)"
                    ></i>
                </div>
            </div>
            <slot />
        </div>
    </div>
</template>

<script>
import image from "@/assets/images/cover3.jpg";

export default {
    name: "comment-item",
    props: {
        comment: {
            type: Object,
        },
        floor: {
            type: Number,
        },
    },
    data() {
        return {
            defaultImg: 'this.src="' + image + '"',
            content: "", // 输入的内容
            isShowEmojiPanel: false,
            index: 0,
        };
    },
    methods: {
        /* 打开回复输入框 */
        showReply(parent, child) {
            this.$emit("onClick", { parent, child });
        },
    },
};
</script>

<style lang="less" scoped>
.comment-item {
    
    .avatar {
        margin-right: 15px;
    }
}
</style>